(function ($, util) {
    "use strict";

    util.Component = {};

    /**
    * 省份简称选择组件
    * options{
    *         trigger:出发按钮 id
    *
    */
    function ProviceSearch(options) {
        this.init(options);
    }

    ProviceSearch.prototype = {
        constructor: ProviceSearch,
        init: function (options) {
            var _this = this;
            _this.options = options;
            _this.trigger = document.querySelector(options.trigger);
            _this.trigger.style.cursor = 'pointer';
            var provinceArr = ["京", "沪", "浙", "苏", "粤", "鲁", "晋", "冀", "豫", "川", "渝", "辽", "吉", "黑", "皖", "鄂", "津", "贵", "云", "桂", "琼", "青", "新", "藏", "蒙", "宁", "甘", "陕", "闽", "赣", "湘"];
            _this.trigger.addEventListener('click', function () {
                _this.PageBody(provinceArr);
                _this.onload();
                document.body.classList.add("forbiden-body-scroll");
            });
        },
        //构建组件主体
        PageBody: function (arr) {
            var _this = this;
            var forHtml = '';
            for (var i = 0; i < arr.length; i++) {
                forHtml += ' <li class="carNum-carPro"><span class="carNum-text">' + arr[i] + '</span></li>'
            };
            _this.ProviceSearchDiv = document.createElement("div");
            _this.ProviceSearchDiv.className = "carNum";
            _this.ProviceSearchDiv.innerHTML = '<div class="carNum-mask"><ul class="carNum-box">' + forHtml + '</ul> </div>';
            document.body.appendChild(_this.ProviceSearchDiv);
        },
        //显示组件盒子
        showCarNum: function () {
            var _this = this, carNumBox = _this.ProviceSearchDiv;    //修改2018-03-20
            carNumBox.style.display = "block";
        },
        //隐藏并移除盒子
        hideCarNum: function () {
            var _this = this, carNumBox = _this.ProviceSearchDiv;    //修改2018-03-20
            carNumBox.style.display = "none";
            if (carNumBox.remove) {
                carNumBox.remove();
            }
            else if (carNumBox.removeNode) {
                carNumBox.removeNode(true);
            }

            if (_this.options.callback) {
                _this.options.callback(_this.trigger.innerHTML);
            }
            document.body.classList.remove("forbiden-body-scroll");
        },
        //阻止事件冒泡
        stopBubble: function (e) {
            var _this = this;
            if (e && e.stopPropagation) {
                // 因此它支持W3C的stopPropagation()方法
                e.stopPropagation();
            } else {
                // 否则，我们需要使用IE的方式来取消事件冒泡
                window.event.cancelBubble = true;
            }
            return false;
        },
        //事件绑定
        onload: function () {
            var _this = this;
            var lis = _this.ProviceSearchDiv.getElementsByClassName('carNum-carPro');  //修改2018-03-20
            for (var i = 0; i < lis.length; i++) {
                lis[i].i = i;
                lis[i].addEventListener('click', function (e) {
                    _this.trigger.innerHTML = this.children[0].innerHTML;//给页面赋值省简称
                    _this.hideCarNum();
                    return _this.stopBubble(e);//阻止事件冒泡
                }, false);
            }
            //点击遮罩
            var maskCover = _this.ProviceSearchDiv.getElementsByClassName("carNum-mask");  //修改2018-03-20
            maskCover[0].addEventListener('click', function (e) {
                _this.hideCarNum();
                return _this.stopBubble(e);//阻止事件冒泡
            }, false);
        }
    };

    /**
     *  下拉框选择组件
     *  options { trigger: 触发按钮id}
     */
    function ActionSheet(options) {
        this.init(options);
    }

    ActionSheet.prototype = {
        constructor: ActionSheet,
        actionArr: util.actionArr,
        init: function (options) {
            var _this = this;
            _this.options = options;
            _this.trigger = document.querySelector(options.trigger);
            _this.trigger.style.cursor = 'pointer';
            _this.trigger.addEventListener('click', function () {
                var pagehpzlparam = _this.trigger.dataset.pagehpzlparam ? _this.trigger.dataset.pagehpzlparam : _this.actionArr[0].hpzlParam;
                _this.PageBody(_this.actionArr, pagehpzlparam);
                _this.onload();
                document.body.classList.add("forbiden-body-scroll");
            });
        },
        //构建组件主体
        PageBody: function (arr, pagehpzlparam) {
            var _this = this;
            var listStr = '';
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].hpzlParam == pagehpzlparam) {
                    listStr += ' <li class="action-sheet-li active" data-hpzlparam=' + arr[i].hpzlParam + '>' + arr[i].hpzlExplain + '</li>'
                } else {
                    listStr += ' <li class="action-sheet-li" data-hpzlparam=' + arr[i].hpzlParam + '>' + arr[i].hpzlExplain + '</li>'
                }
            };

            var html = ' <div class="mask"></div>'
                + ' <div class="action-sheet">'
                + '     <div class="action-sheet-up">'
                + '         <ul>'
                + listStr
                + '         </ul>'
                + '     </div>'
                + '     <div class="action-sheet-mid"></div>'
                + '     <div class="action-sheet-down">'
                + '          <button type="button" class="action-sheet-cancel-button">取消</button>'
                + '     </div>'
                + '</div>';

            _this.ActionSheetDiv = document.createElement("div");
            _this.ActionSheetDiv.className = "actionSheet";
            _this.ActionSheetDiv.innerHTML = html;
            document.body.appendChild(_this.ActionSheetDiv);
        },
        //显示组件盒子
        showCarNum: function () {
            var _this = this,
                ActionSheetBox = _this.ActionSheetDiv;
            ActionSheetBox.style.display = "block";
        },
        //隐藏并移除盒子
        hideCarNum: function () {
            var _this = this,
                ActionSheetBox = _this.ActionSheetDiv;
            ActionSheetBox.style.display = "none";
            if (ActionSheetBox.remove) {
                ActionSheetBox.remove();
            }
            else if (ActionSheetBox.removeNode) {
                ActionSheetBox.removeNode(true);
            }

            if (_this.options.callback) {
                var pagehpzlparam = _this.trigger.dataset.pagehpzlparam ? _this.trigger.dataset.pagehpzlparam : _this.actionArr[0].hpzlParam;
                _this.options.callback(_this.trigger.innerHTML, pagehpzlparam);
            }
            document.body.classList.remove("forbiden-body-scroll");
        },
        //阻止事件冒泡
        stopBubble: function (e) {
            var _this = this;
            if (e && e.stopPropagation) {
                // 因此它支持W3C的stopPropagation()方法
                e.stopPropagation();
            } else {
                // 否则，我们需要使用IE的方式来取消事件冒泡
                window.event.cancelBubble = true;
            }
            return false;
        },
        //事件绑定
        onload: function () {
            var _this = this;
            var lis = _this.ActionSheetDiv.getElementsByClassName('action-sheet-li');
            for (var i = 0; i < lis.length; i++) {
                lis[i].i = i;
                lis[i].addEventListener('click', function (e) {
                    _this.trigger.innerHTML = this.innerHTML;//给页面赋值省简称
                    _this.trigger.dataset.pagehpzlparam = this.dataset.hpzlparam;
                    this.addClass = "active";
                    _this.hideCarNum();
                    return _this.stopBubble(e);//阻止事件冒泡
                }, false);
            }
            //点击遮罩
            var maskCover = _this.ActionSheetDiv.getElementsByClassName("mask");
            maskCover[0].addEventListener('click', function (e) {
                _this.hideCarNum();
                return _this.stopBubble(e);//阻止事件冒泡
            }, false);
            //点击取消
            var cancel = _this.ActionSheetDiv.getElementsByClassName("action-sheet-cancel-button");
            cancel[0].addEventListener('click', function (e) {
                _this.hideCarNum();
                return _this.stopBubble(e);//阻止事件冒泡
            }, false)
        }
    };


    /**
     *  示例图片弹窗
     */
    function Pop(options) {
        this.init(options);
    }

    Pop.prototype = {
        constructor: Pop,
        init: function (options) {
            var _this = this;
            _this.options = options;
            _this.trigger = document.querySelector(options.trigger);
            _this.trigger.style.cursor = 'pointer';
            _this.trigger.addEventListener('click', function () {
                _this.PageBody(options.data);
                _this.onload();
                document.body.classList.add("forbiden-body-scroll");
            });
        },
        //构建组件主体
        PageBody: function (data) {
            var _this = this;
            var html = '<div class="pop-mask">'
                + '<div class="pop-box">'
                + '    <div class="pop-inner">'
                + '         <div class="pop-close">'
                + '              <img class="img" src="http://' +location.host + location.pathname + '/images/bjcg-sl-close.png" alt="">'
                    + '         </div>'
                    + '         <h4 class="pop-title">' + data.imgText + '</h4>'
                    + '         <img class="img" src="' + data.imgUrl + '" alt="">'
                    + '     </div>'
                    + '</div></div>';
            _this.PopDiv = document.createElement("div");
            _this.PopDiv.className = "pop";
            _this.PopDiv.innerHTML = html;
            document.body.appendChild(_this.PopDiv);
        },
        //显示组件盒子
        showCarNum: function () {
            var _this = this,
                PopDiv = _this.PopDiv;
            PopDiv.style.display = "block";
        },
        //隐藏并移除盒子
        hideCarNum: function () {
            var _this = this,
                PopDiv = _this.PopDiv;
            PopDiv.style.display = "none";
            if (PopDiv.remove) {
                PopDiv.remove();
            }
            else if (PopDiv.removeNode) {
                PopDiv.removeNode(true);
            }

            if (_this.options.callback) {
                _this.options.callback();
            }
            document.body.classList.remove("forbiden-body-scroll");
        },
        //阻止事件冒泡
        stopBubble: function (e) {
            var _this = this;
            if (e && e.stopPropagation) {
                // 因此它支持W3C的stopPropagation()方法
                e.stopPropagation();
            } else {
                // 否则，我们需要使用IE的方式来取消事件冒泡
                window.event.cancelBubble = true;
            }
            return false;
        },
        //事件绑定
        onload: function () {
            var _this = this;
            //点击遮罩
            var maskCover = _this.PopDiv.getElementsByClassName("pop-mask");
            maskCover[0].addEventListener('click', function (e) {
                _this.hideCarNum();
                return _this.stopBubble(e);//阻止事件冒泡
            }, false);

            //点击关闭按钮
            var closeBtn = _this.PopDiv.getElementsByClassName("pop-close");
            closeBtn[0].addEventListener('click', function (e) {
                _this.hideCarNum();
                return _this.stopBubble(e);//阻止事件冒泡
            }, false);
        }
    }



    util.Component.ProviceSearch = ProviceSearch;
    util.Component.ActionSheet = ActionSheet;
    util.Component.Pop = Pop;
})(jQuery, window.util);